<template>
  <div class="user">
    <div class="top"></div>
    <router-link to="/" class="go">{{ $t("user.gohome") }}</router-link>
    <!-- 个人中心 -->
    <el-tabs
      :tab-position="tabPosition"
      style="height: 760px; width: 900px; margin: 0 auto"
    >
      <el-tab-pane :label="tet1">
        <p class="tit tet1">{{ $t("user.userInfo") }}</p>
        <div class="box">
          <!-- 头像 -->
          <div class="img">
            <img src="../assets/img/money/1.png" alt="" style="height: 100%" />
          </div>
          <!-- 用户个人信息 -->
          <div class="userInfo">
            <ul>
              <li>
                <span class="msg">{{ $t("user.userCard") }}：</span>
                <span class="txt">{{ data.email }}</span>
              </li>
              <li>
                <span class="msg">{{ $t("user.userName") }}：</span>
                <span class="txt">{{ data.username }}</span>
              </li>
              <li>
                <span class="msg">{{ $t("user.userID") }}：</span>
                <span class="txt">{{ data.rid }}</span>
              </li>
              <li>
                <span class="msg">{{ $t("user.renZheng") }}：</span>
                <span class="txt">{{ data.state }}</span>
              </li>
              <li>
                <span class="msg">{{ $t("user.Money") }}：</span>
                <span class="txt">{{ data.gold }}</span>
              </li>
              <li>
                <span class="msg">{{ $t("user.Meta") }}：</span>
                <span class="txt">{{ data.money }}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="tet2">
        <!-- 修改密码 -->
        <p class="tit tet2">{{ $t("user.safety") }}</p>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="原密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确认修改</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="tet3">
        <!-- 实名认证 -->
        <p class="tit tet3">{{ $t("user.renZheng") }}</p>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="#"
          :headers="Headers"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="successUpload"
          :file-list="fileList"
          :auto-upload="false"
          :limit="3"
          name="file"
          :on-exceed="limitCheck"
          accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
          list-type="picture-card"
          :before-upload="onBeforeUpload"
          :on-change="handleChange"
          v-if="isRen"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >上传到服务器</el-button
          >
        </el-upload>
        <div class="renZ" v-if="!isRen">{{ $t("user.renZ") }}</div>
      </el-tab-pane>
      <el-tab-pane :label="tet4">
        <p class="tit tet4">{{ $t("user.wallet") }}</p>
        <!-- 钱包充值 -->
        <div class="chongzhi">
          <div class="ti" style="width:100%">
            <span>币种</span>
            <span>资产</span>
            <span>操作</span>
          </div>
          <ul>
            <li>

            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="tet5">
        <p class="tit tet5">{{ $t("user.exchange") }}</p>
        <!-- 兑换 -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import base from "../api/base";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (value === this.ruleForm.pass) {
        callback(new Error("新旧密码不能一致!"));
      } else {
        callback();
      }
    };
    return {
      fileList: [],
      Headers: {
        "Content-Type": "multipart/form-data",
      },
      param: {},
      tabPosition: "left",
      data: {}, //用户数据
      tet1: "",
      tet2: "",
      tet3: "",
      tet4: "",
      tet5: "",
      ruleForm: {
        pass: "",
        checkPass: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
      isRen: false, //是否显示认证上传图片开关
      // url: base.host2+base.upload+'?token='+JSON.parse(localStorage.getItem("user")).token, //图片地址服务器
      url: base.upload,
      token: JSON.parse(localStorage.getItem("user")).token,
      // 钱包数据
      tableData: [
        {
          date: "USDT",
          name: "12345",
        },
        {
          date: "BTC",
          name: "12345",
        },
        {
          date: "ETH",
          name: "12345",
        },
        {
          date: "BCH",
          name: "12345",
        },
        {
          date: "LTC",
          name: "12345",
        },
        {
          date: "DOT",
          name: "12345",
        },
      ],
    };
  },
  methods: {
    // 密码修改
    submitForm(formName) {
      let token = JSON.parse(localStorage.getItem("user")).token;
      var params = {
        pass: this.ruleForm.pass,
        newpass: this.ruleForm.checkPass,
        token: token,
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.changPass(params).then((res) => {
            if (params) {
              if (res.code === 1) {
                this.$message({
                  message: "success",
                  type: "success",
                });
              } else {
                //密码错误
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 图片上传
    //点击上传按钮--submit()	手动上传文件列表
    submitUpload() {
      // this.$refs.upload.submit(); 放弃action提交
      if (this.fileList.length < 3) {
        //提交数据前校验图片必须大于三张
        this.$message({
          message: "error",
          type: "error",
        });
        return;
      }
      this.fileList.forEach((element) => {
        this.param.append("files", element);
      });
      this.param.append("token", this.token + "");
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.$axios
        .post(base.host2 + base.upload, this.param, config)
        .then((res) => {
          if (res.status === 200 && res.code === 1) {
            //上传成功
            console.log(res);
          }
        });
    },
    //发送前验证发送的内容
    onBeforeUpload(file) {},
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    /**
     * 上传成功的函数
     */
    successUpload(response, file, fileList) {
      console.log("上传成功", response, file, fileList);
      this.$message({
        message: "success",
        type: "success",
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 图片上传最大3张图，超出提示
    limitCheck() {
      this.$message.warning("最多只能上传三张图片");
    },
  },
  created() {
    this.param = new FormData();
    let token = JSON.parse(localStorage.getItem("user")).token;
    let params = {
      token: token,
    };
    //获取用户信息
    this.$api.getUser(params).then((res) => {
      if (params) {
        if (res.code === 1) {
          let lang = this.$i18n.locale;
          this.data = res;
          console.log(this.data = res);
          console.log(res);
          if (this.data.state === 0) {
            switch (lang) {
              case "zh":
                this.data.state = "未认证";
                break;
              case "en":
                this.data.state = "unauthorized";
                break;
              case "kr":
                this.data.state = "인증되지 않음";
                break;
              case "jp":
                this.data.state = "認証されていません";
                break;
              default:
                this.data.state = "未認證";
            }

            this.isRen = true;
          } else {
            switch (lang) {
              case "zh":
                this.data.state = "已认证";
                break;
              case "en":
                this.data.state = "certified";
                break;
              case "kr":
                this.data.state = "인증됨";
                break;
              case "jp":
                this.data.state = "認証済み";
                break;
              default:
                this.data.state = "已認證";
            }
            this.isRen = false;
          }
        }
      }
    });
  },
  mounted() {
    //更改elelabel绑定多语言
    this.tet1 = document.querySelector(".tet1").innerText;
    this.tet2 = document.querySelector(".tet2").innerText;
    this.tet3 = document.querySelector(".tet3").innerText;
    this.tet4 = document.querySelector(".tet4").innerText;
    this.tet5 = document.querySelector(".tet5").innerText;
  },
};
</script>

<style lang="less" scoped>
.ti{
  span{
    margin-right: 200px;
  }
  span:nth-child(3){
    margin-right: 0;
  }
}
.renZ{
  margin-top: 50px;
  font-size: 30px;
  color: green;
}
.go {
  position: relative;
  left: 0;
  top: 50px;
  padding: 5px;
  background-color: rgb(231, 200, 139);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 500;
  color: #6c5a56;
}
.go:hover {
  opacity: 0.8;
}
/deep/.el-tabs--left .el-tabs__item.is-left {
  text-align: center;
}
.top {
  width: 100%;
  height: 20px;
  background: url("../assets/images/line_b_top.png");
}
.img {
  width: 30%;
  height: 100%;
}
.userInfo {
  width: 70%;
  height: 100%;
  ul {
    li {
      margin-bottom: 15px;
      font-size: 22px;
      text-align: left;
      color: #6c5a56;
      .msg {
        width: 50px;
      }
      .txt {
        width: 70%;
      }
    }
  }
}
.tit {
  font-size: 40px;
  font-weight: 700px;
}
/deep/.el-tabs__active-bar {
  display: none;
}
.user {
  min-height: 100%;
  background: url("../assets/images/bg_pattern_brick.png");
  /deep/.el-tabs__nav {
    margin: 150px 0;
    border-radius: 10px;
    border: 3px solid rgb(231, 200, 139);
  }
  /deep/.el-tabs__content {
    margin: 100px 0;
  }
  /deep/.el-tabs__nav-wrap::after {
    position: static;
  }
  /deep/.el-tabs__item {
    margin: 15px 30px;
    border: 1px solid;
    border-radius: 20px;
  }
  .box {
    div {
      margin-top: 50px;
      float: left;
    }
  }
}
</style>>